<template>
  <div>
    <h1>用户充值</h1>
    <div
      class="pt van-row van-row--flex van-row--align-center van-row--justify-space-between active"
    >
      <div class="van-col">账户余额</div>
      <div class="van-col">0</div>
    </div>
    <van-divider />
    <p class="recharge-text">
      即将充值进
      <span>xxx</span>
      账户 请选择充值金额
    </p>
    <!-- <p>
      即将充值进
      <span>IOS</span>
      系统账户 请选择充值金额
    </p> -->
    <div class="cz active">
      <van-grid clickable :gutter="10" :column-num="3">
        <van-grid-item v-for="(value, item) in msg" :key="item" :text="value" />
      </van-grid>
    </div>
    <span class="fq"></span>
    <div class="m-card">
      <p class="recharge-des-title">充值说明</p>
      <ol>
        <li>
          根据苹果公司相关规定，iOS系统和Android系统中的账户数据不可互通，请选择系统平台进行充值并检查充值账户是否正确；
        </li>
        <li>
          充值比例:1元等于1读贝，充值成功后，读贝不会过期，但由于读贝为虚拟货币，所以不可转移，不可提现；
        </li>
        <li>
          当您在iOS系统与Android系统中登录同一账号时，购买的商品可以同步使用。
        </li>
      </ol>
    </div>
    <div class="btn">
      <van-button round type="info" size="large" color="#3eaf7c"
        >充值</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ['￥6', '￥18', '￥68', '￥88', '￥128', '￥198'],
    }
  },
}
</script>

<style scoped>
h1 {
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 20px;
  color: #333;
  line-height: 40px;
}
.pt {
  width: 80%;
  margin: 0 auto;
  border: 2px solid #3eaf7c;
  margin-bottom: 20px;
  height: 50px;
  padding: 0 20px;
  color: #3eaf7c;
  background-color: #fff;
  border-radius: 5px;
}
.pt.active {
  background-color: #3eaf7c;
  color: #fff;
}
.recharge-text {
  text-indent: 20px;
  font-size: 14px;
  color: #333;
  line-height: 22px;
}
.recharge-text > span {
  color: #3eaf7c;
}
.van-grid-item__content .van-grid-item__text {
  font-size: 14px;
  color: #3eaf7c;
}
.van-hairline {
  border: 1px solid #3eaf7c;
  border-radius: 10px;
}
.fq {
  display: block;
  height: 12px;
  width: 100%;
  background-color: rgba(243, 243, 243, 0.966);
  margin-top: 25px;
}
.btn {
  position: fixed;
  bottom: 5%;
  left: 5%;
  width: 90%;
  height: 40px;
  margin: 0 auto;
  margin-top: 25px;
}
.m-card {
  height: 250px;
  padding: 20px 16px;
}
.m-card > p {
  margin-bottom: 12px;
  font-size: 14px;
  color: #333;
  line-height: 22px;
}
.m-card li {
  margin-left: 20px;
  list-style-type: decimal; /* li前的编号 */
  font-size: 14px;
  color: #999;
  text-align: justify;
  line-height: 22px;
}
</style>
